<template>
  <div>
    <div>
      <!-- 系统信息 -->
      <div style="overflow: hidden">
        <a-card
          style="width: 20%; border-radius: 5px; padding: 10px"
          class="card-margin-right"
        >
          <a-descriptions :data="osInfo" title="系统信息" :column="1">
            <a-descriptions-item
              v-for="item of osInfo"
              :key="item.label"
              :label="item.label"
            >
              <a-tag>{{ item.value }}</a-tag>
            </a-descriptions-item>
          </a-descriptions>
        </a-card>

        <!-- 内存信息 -->
        <a-card
          style="width: 20%; border-radius: 5px; padding: 10px; margin-top: 1vh"
          class="card-margin-right"
        >
          <a-descriptions :data="memoryInfo" title="内存信息" :column="1">
            >
            <a-descriptions-item
              v-for="item of memoryInfo"
              :key="item.label"
              :label="item.label"
            >
              <a-tag>{{ item.value }}</a-tag>
            </a-descriptions-item>

            <a-descriptions-item key="占用情况" label="占用情况">
              <a-progress :percent="0.2" :style="{ width: '50%' }" />
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
      </div>
      <!-- JVM 信息 -->
      <div style="overflow: hidden; margin-top: 1vh">
        <a-card
          style="width: 20%; border-radius: 5px; padding: 10px; float: left"
          class="card-margin-right"
        >
          <a-descriptions :data="jvmInfo" title="JVM信息 " :column="1">
            <a-descriptions-item
              v-for="item of jvmInfo"
              :key="item.label"
              :label="item.label"
            >
              <a-tag>{{ item.value }}</a-tag>
            </a-descriptions-item>

            <a-descriptions-item key="占用情况" label="占用情况">
              <a-progress :percent="0.2" :style="{ width: '50%' }" />
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
      </div>
      <!-- CPU信息 -->
      <div style="overflow: hidden; margin-top: 1vh">
        <a-card
          style="width: 20%; border-radius: 5px; padding: 10px; float: left"
          class="card-margin-right"
        >
          <a-descriptions :data="cpuInfo" title="CPU信息 " :column="1">
            <a-descriptions-item
              v-for="item of cpuInfo"
              :key="item.label"
              :label="item.label"
            >
              <a-tag>{{ item.value }}</a-tag>
            </a-descriptions-item>

            <a-descriptions-item key="占用情况" label="占用情况">
              <a-progress :percent="0.2" :style="{ width: '50%' }" />
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
      </div>
    </div>

    <!-- 硬盘信息 -->
    <div style="overflow: hidden; margin-top: 1vh">
      <a-card
        v-for="item of diskData"
        :key="item.disk_name"
        style="width: 20%; border-radius: 5px; padding: 10px; float: left"
        class="card-margin-right"
      >
        <a-descriptions :data="item.data" :title="item.disk_name" :column="1">
          <a-descriptions-item
            v-for="item_in of item.data"
            :key="item_in.label"
            :label="item_in.label"
          >
            <a-tag>{{ item_in.value }}</a-tag>
          </a-descriptions-item>

          <a-descriptions-item key="占用情况" label="占用情况">
            <a-progress :percent="0.2" :style="{ width: '50%' }" />
          </a-descriptions-item>
        </a-descriptions>
      </a-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const osInfo = [
    {
      label: '系统厂商',
      value: '13900H',
    },
    {
      label: '系统名称',
      value: '13900H',
    },
    {
      label: '版本号',
      value: '13900H',
    },
  ]

  const jvmInfo = [
    {
      label: 'Java 版本',
      value: '1.8',
    },
    {
      label: '来源',
      value: 'Oracle Corporation',
    },
    {
      label: 'JVM 内存大小',
      value: '241.5 MB',
    },
    {
      label: '剩余可使用大小',
      value: '214.93 MB',
    },
    {
      label: 'CPU用户使用率',
      value: '1',
    },
    {
      label: 'CPU当前空闲率',
      value: '1',
    },
    {
      label: 'CPU型号',
      value: '1',
    },
  ]

  const diskInfo = () => {}

  const cpuInfo = [
    {
      label: 'CPU数量',
      value: '1',
    },
    {
      label: '物理核心数',
      value: '1',
    },
    {
      label: '逻辑核心数',
      value: '1',
    },
    {
      label: 'CPU系统使用率',
      value: '1',
    },
    {
      label: 'CPU用户使用率',
      value: '1',
    },
    {
      label: 'CPU当前空闲率',
      value: '1',
    },
    {
      label: 'CPU型号',
      value: '1',
    },
  ]

  const memoryInfo = [
    {
      label: '总内存',
      value: '16G',
    },
    {
      label: '已用内存',
      value: '10G',
    },
    {
      label: '可用内存',
      value: '6G',
    },
  ]

  const diskData = [
    {
      disk_name: 'disk_1',
      data: [
        {
          label: '最大容量',
          value: '1024G',
        },
        {
          label: '已使用容量',
          value: '300G',
        },
        {
          label: '可使用容量',
          value: '724G',
        },
      ],
    },
    {
      disk_name: 'disk_2',
      data: [
        {
          label: '最大容量',
          value: '1024G',
        },
        {
          label: '已使用容量',
          value: '300G',
        },
        {
          label: '可使用容量',
          value: '724G',
        },
      ],
    },
    {
      disk_name: 'disk_3',
      data: [
        {
          label: '最大容量',
          value: '1024G',
        },
        {
          label: '已使用容量',
          value: '300G',
        },
        {
          label: '可使用容量',
          value: '724G',
        },
      ],
    },
  ]
</script>

<style scoped>
  .card-margin-right {
    margin-right: 1vh;
  }
</style>
